import './css/index.scss';
import React from 'react';
import { render } from 'react-dom';
import Device from "./components/android";
import data from "./model/data";


import './images/banner-mobile-android-map-light@2x.png';
import './images/banner-laptop-windows-map-light.png';
import './images/banner-laptop-macos-map-light.png';
import './images/banner-mobile-ios-map-light@2x.png';
import './images/firefox-extension-connected-us@2x.png';



import './images/hero-pills-light-right.svg';

$(function () {

    let renderFun=(component)=>{
        render(component,$(".BannerWrapper")[0])
    }

    $(".ScrollableTabs__items li").on("click",function(e){
        let target=$(e.currentTarget);
        target.addClass('ScrollableTabs__item--active')
        .siblings()
        .removeClass("ScrollableTabs__item--active");
        data.index=target.index();
        renderFun(<Device data={data} />);
    });
    data.index=0;
    renderFun(<Device data={data} />)
    
});